/* eslint-disable implicit-arrow-linebreak */
/* eslint-disable multiline-ternary */
// ** React Imports
import { Link, useNavigate } from 'react-router-dom'

// ** Custom Hooks
import themeConfig from '@configs/themeConfig'
import { useSkin } from '@hooks/useSkin'
import { isObjEmpty } from '@utils'
import * as Yup from 'yup'

// ** Icons Imports
import { ChevronLeft } from 'react-feather'

// ** Reactstrap Imports
import {
  Button,
  CardText,
  CardTitle,
  Col,
  Form,
  FormFeedback,
  Input,
  Label,
  Row,
  Spinner
} from 'reactstrap'

// ** Styles
import '@styles/react/pages/page-authentication.scss'
import classNames from 'classnames'
import { FormikProvider, useFormik } from 'formik'
import { useDispatch, useSelector } from 'react-redux'
import { forgotPasswordAction } from '../../redux/authentication/authAction'

const ForgotPassword = () => {
  // ** Hooks
  const { skin } = useSkin()
  const dispatch = useDispatch()
  const navigate = useNavigate()
  const { forgotPasswordLoading } = useSelector((state) => state.auth)

  const illustration =
      skin === 'dark'
        ? 'forgot-password-v2-dark.svg'
        : 'forgot-password-v2.svg',
    source = require(`@src/assets/images/pages/${illustration}`)

  const ResetPasswordSchema = Yup.object().shape({
    email: Yup.string()
      .email('Please enter a valid email address')
      .required('Email is a required field')
  })
  // formik hook
  const formik = useFormik({
    initialValues: {
      email: ''
    },
    validationSchema: ResetPasswordSchema,
    onSubmit: (values) => {
      if (isObjEmpty(formik.errors)) {
        const data = {
          email: values.email.toLowerCase()
        }
        dispatch(
          forgotPasswordAction({ data, callback: () => navigate('/login') })
        )
      }
    }
  })

  return (
    <div className="auth-wrapper auth-cover">
      <Row className="auth-inner m-0">
        <Link
          className="brand-logo d-flex align-items-center"
          to="/"
          onClick={(e) => e.preventDefault()}
        >
          {skin === 'dark' ? (
            <img
              src={themeConfig.app.appLogoImage}
              alt="logo-dark"
              height={35}
              width={35}
            />
          ) : (
            <img
              src={themeConfig.app.appLogoImage}
              alt="logo-dark"
              height={35}
              width={35}
            />
          )}
          <h2 className="ms-1 mb-0">ethera</h2>
        </Link>
        <Col
          className="d-md-none d-lg-flex align-items-center p-5"
          lg="8"
          sm="12"
        >
          <div className="w-100 d-lg-flex align-items-center justify-content-center px-5">
            <img className="img-fluid" src={source} alt="Login Cover" />
          </div>
        </Col>
        <Col
          className="d-flex align-items-center auth-bg px-2 p-lg-5"
          lg="4"
          sm="12"
        >
          <Col className="px-xl-2 mx-auto" sm="8" md="6" lg="12">
            <CardTitle tag="h2" className="fw-bold mb-1 pl-10px">
              Forgot Password 🔒
            </CardTitle>
            <CardText className="mb-2 pl-10px">
              Enter your email and we'll send you instructions to reset your
              password
            </CardText>
            <FormikProvider value={formik}>
              <Form
                className="auth-forgot-password-form mt-2"
                onSubmit={formik.handleSubmit}
              >
                <div className="mb-1">
                  <Label className="form-label pl-10px" for="login-email">
                    Email
                  </Label>
                  <Input
                    autoFocus
                    type="email"
                    id="login-email"
                    placeholder="abc@example.com"
                    className={classNames({
                      'radius-25 skin-change': true,
                      'is-invalid': formik.touched.email && formik.errors.email
                    })}
                    {...formik.getFieldProps('email')}
                    onChange={(e) =>
                      formik.setFieldValue('email', e.target.value)
                    }
                  />
                  {formik.touched.email && formik.errors.email && (
                    <FormFeedback className="px-1">
                      {formik.errors.email}
                    </FormFeedback>
                  )}
                </div>
                <Button
                  block
                  type="submit"
                  color="primary"
                  className="button-primary"
                  onClick={() => formik.handleSubmit()}
                  disabled={forgotPasswordLoading}
                >
                  {forgotPasswordLoading && (
                    <Spinner size="sm spinner-size-same" />
                  )}
                  <span className="px-1">Send reset link</span>
                </Button>
              </Form>
            </FormikProvider>
            <p className="text-center mt-2">
              <Link to="/login">
                <ChevronLeft
                  className="rotate-rtl me-25"
                  size={14}
                  color="#000"
                />
                <span className="align-middle black">Back to login</span>
              </Link>
            </p>
          </Col>
        </Col>
      </Row>
    </div>
  )
}

export default ForgotPassword
